<template>
  <div class="login">
    <p><a href="https://en.wikipedia.org/wiki/Yellow"> EASON </a></p>
    <div>世事無常還是未看夠</div>
    <loginpanel />
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core'
import loginpanel from './cpns/loginpanel.vue'

export default defineComponent({
  components: {
    loginpanel
  },
  setup() {
    return {}
  }
})
</script>
<style lang="less">
.login {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1920;
  height: 0;
  background: url('../../assets/img/昭.jpg');
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 47.5%;
}
p {
  text-align: center;
  font-size: 4em;
  position: fixed;
  left: 44%;
  top: -5%;
}

a {
  text-decoration: none;
  transition: all 0.5s;
}
p:nth-child(1) a {
  color: #ff9900;
  font-family: Audiowide;
}

p:nth-child(1) a {
  animation: neon5 0.8s ease-in-out infinite alternate;
  color: #ffffff;
}
/*glow for webkit*/
@-webkit-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff9900,
      0 0 70px #ff9900, 0 0 80px #ff9900, 0 0 100px #ff9900, 0 0 150px #ff9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff9900,
      0 0 35px #ff9900, 0 0 40px #ff9900, 0 0 50px #ff9900, 0 0 75px #ff9900;
  }
}
/*glow for mozilla*/
@-moz-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff9900,
      0 0 70px #ff9900, 0 0 80px #ff9900, 0 0 100px #ff9900, 0 0 150px #ff9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff9900,
      0 0 35px #ff9900, 0 0 40px #ff9900, 0 0 50px #ff9900, 0 0 75px #ff9900;
  }
}
/*glow*/
@keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff9900,
      0 0 70px #ff9900, 0 0 80px #ff9900, 0 0 100px #ff9900, 0 0 150px #ff9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff9900,
      0 0 35px #ff9900, 0 0 40px #ff9900, 0 0 50px #ff9900, 0 0 75px #ff9900;
  }
}
/*REEEEEEEEEEESPONSIVE*/
@media (max-width: 650px) {
  #container {
    width: 100%;
  }
  p {
    font-size: 3.5em;
  }
}
</style>
